// Radio

// Config
$e-radio-base-color: e-base-color(grey, 1);

$e-radio-config: (
    self: (
        transition: all .3s ease,
        size: 18px,
        tick: 6px
    ),
    outline: (
        border: (
            default: darken($e-radio-base-color, 12%),
            checked: darken($e-radio-base-color, 15%)
        ),
        tick: darken($e-radio-base-color, 18%)
    ),
    solid: (
        bg: (
            default: darken($e-radio-base-color, 6%),
            checked: darken($e-radio-base-color, 8%)
        ),
        tick: darken($e-radio-base-color, 30%)
    )
);

// Base
.e-radio {
    display: inline-block;
    position: relative;
    padding-left: 30px;
    text-align: left;
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 1rem;
    transition: e-get($e-radio-config, self, transition);

    &.e-radio--disabled {
        opacity: .8;
        cursor: not-allowed;
    }

    // 隐藏浏览器默认的radio
    > input {
        position: absolute;
        z-index: -1;
        opacity: 0;
    }

    > span {
        background: none;
        position: absolute;
        top: 1px;
        left: 0;
        height: e-get($e-radio-config, self, size);
        width: e-get($e-radio-config, self, size);
        border-radius: 50% !important;

        &:after {
            content: '';
            position: absolute;
            display: none; // Hide check
            top: 50%;
            left: 50%;
            margin-left: -(e-get($e-radio-config, self, tick) / 2);
            margin-top: -(e-get($e-radio-config, self, tick) / 2);
            width: e-get($e-radio-config, self, tick);
            height: e-get($e-radio-config, self, tick);
            border-radius: 100% !important;
        }
    }

    > input:checked ~ span {
        transition: e-get($e-radio-config, self, transition);
        background: none;

        &:after {
            display: block;
        }
    }

    &:hover > input:not([disabled]):checked ~ span,
    > input:checked ~ span {
        transition: e-get($e-radio-config, self, transition);

    }

    > input:disabled ~ span {
        opacity: .6;
        pointer-events: none;
    }

    &.e-radio--solid {
        > span {
            border: 1px solid transparent;
        }

        &:hover > input:not([disabled]) ~ span,
        > input:focus ~ span {
            transition: e-get($e-radio-config, self, transition);
        }
    }

    &.e-radio--square {
        > span {
            border-radius: 0;
        }
    }

    &.e-radio--bold > span {
        border-width: 2px !important;
        transition: e-get($e-radio-config, self, transition);
    }

    .form-inline & {
        margin-left: 15px;
        margin-right: 15px;
    }

    &.e-radio--single {
        width: e-get($e-radio-config, self, size);
        height: e-get($e-radio-config, self, size);

        > span {
            top: 0;
        }

        th > &,
        td > & {
            right: -5px;
        }
    }

    // Input group
    .input-group & {
        margin-bottom: 0 !important;
        padding-left: 0;
    }
}

.e-radio-list {
    padding: 0 0;

    .e-radio {
        display: block;
        text-align: left;

        &:last-child {
            margin-bottom: 5px;
        }
    }
}

.e-radio-inline {
    padding: 0 0;

    .e-radio {
        display: inline-block;
        margin-right: 15px;
        margin-bottom: 5px;

        &:last-child {
            margin-right: 0;
        }
    }
}

.form-group.row {
    .e-radio-inline, .e-radio-list {
        margin-top: .5rem;
    }
}

// Skin
@mixin e-radio-theme(
    $outline-border-color, 
    $outline-border-checked-color, 
    $outline-tick-color, 
    $solid-bg-color, 
    $solid-bg-checked-color, 
    $solid-tick-color) {

    // Outline
    > span {
        border: 1px solid $outline-border-color;

        &:after {
            border: solid $outline-tick-color;
            background: $outline-tick-color;
        }
    }

    > input:disabled ~ span {
        &:after {
            border-color: $outline-border-checked-color;
        }
    }

    > input:checked ~ span {
        border: 1px solid $outline-border-checked-color;
    }

    &.e-radio--bold > input:checked ~ span {
        border: 2px solid $outline-border-checked-color;
    }

    > input:disabled ~ span {
        opacity: .6;
    }

    // Solid
    &.e-radio--solid {
        > span {
            background: $solid-bg-color;
            border: 1px solid transparent !important;

            &:after {
                border: solid $solid-tick-color;
                background: $solid-tick-color;
            }
        }


        > input:focus ~ span {
            border: 1px solid transparent !important;
        }

        > input:checked ~ span {
            background: $solid-bg-checked-color;
        }
    }
}

// Default
.e-radio {
    @include e-radio-theme(
            e-get($e-radio-config, outline, border, default),
            e-get($e-radio-config, outline, border, checked),
            e-get($e-radio-config, outline, tick),
            e-get($e-radio-config, solid, bg, default),
            e-get($e-radio-config, solid, bg, checked),
            e-get($e-radio-config, solid, tick)
    );

    // State Colors
    @each $name, $color in $e-state-colors {
        &.e-radio-#{$name} {
            @include e-radio-theme(
                    e-get($color, base),
                    e-get($color, base),
                    e-get($color, base),
                    e-get($color, base),
                    e-get($color, base),
                    e-get($color, inverse)
            );
        }
    }
}